<template>
  <div class="es6">
    <div>{{ student.age }}</div>
    <el-button @click="seeage" type="primary">点击显示年纪</el-button>
    <div v-for="(v, i) in arr" :key="i">{{ v }}</div>
    <el-button @click="arry" type="primary">数组splice方法</el-button>
    <el-button @click="Refresh">刷新页面并重载页面数据</el-button>
    <el-input
      v-model="input"
      placeholder="请输入内容"
      style="width: 200px"
      @change="change"
      @blur="blur"
    ></el-input>

    <el-date-picker
      v-time
      v-model="value1"
      type="datetime"
      value-format="timestamp"
      placeholder="开始日期"
    >
    </el-date-picker>
    <el-date-picker
      v-model="value2"
      align="right"
      type="datetime"
      placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
    <div>—————————————————————————————————————————————</div>
    <div>
      <el-button @click="arryse" type="primary">es6数组方法</el-button>
    </div>
  </div>
</template>

<script>
let time1 = undefined;
export default {
  name: "es6",
  inject: ["reload"],
  data() {
    return {
      input: "",
      student: {
        name: "张三",
        sex: "",
      },
      arr: ["a", "b", "c", "d"],
      demo: [
        {
          name: "张三",
          age: 18,
        },
        {
          name: "李四",
          age: 20,
        },
      ],
      cityName: {
        name: "北京",
        location: "中国",
      },

      //日期设置
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < time1;
        },
        selectableRange: "10:41:40 - 23:59:59",
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  watch: {
    //监听数组变化
    demo: {
      handler(val) {
        console.log(val);
      },
      // 这里是关键，代表递归监听 demo 的变化
      deep: true,
    },
    //监听对象中属性值的变化
    "cityName.name": {
      handler(newName, oldName) {
        console.log(newName);
        console.log(oldName);
      },
      // immediate: true,
      deep: true,
    },

    value1(v) {
      time1 = v;
    },
  },
  methods: {
    change() {
      // 没有进行任何输入时或者输入后值并没有发生变更。不会触发change
      console.log(`输入框的值变成了:${this.input}`);
    },
    blur() {
      //但是blur都会触发
      // console.log(`输入框的值变成了：${this.input}`);
    },

    seeage() {
      this.$set(this.demo[0], "sex", "男");
      this.cityName.name = "成都";
      // this.student.age=24   这样不能实现双向绑定
      if (this.student.age == null) return this.$set(this.student, "age", 24);
      return (this.student.age = null);
    },

    arry() {
      //splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值。
      this.arr.splice(0, 2, "new");

      //使用for...of遍历字符串
      let text = "a阿大撒";
      for (let i of text) {
        console.log(i);
      }
      //判断字符串是否包含另一个字符串。这三个方法都支持第二个参数，表示开始搜索的位置，
      //endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
      let s = "Hello world!";
      s.startsWith("Hello"); // true
      s.endsWith("!"); // true
      s.includes("o"); // true
      //repeat方法返回一个新字符串，表示将原字符串重复n次。
      "x".repeat(3); // "xxx"
      "hello".repeat(2); // "hellohello"
      "na".repeat(0); // ""
      //如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
      "12".padStart(10, "YYYY-MM-DD"); // "YYYY-MM-12"
      "09-12".padStart(10, "YYYY-MM-DD"); // "YYYY-09-12"
      "abc".padEnd(10, "0123456789"); // 'abc0123456'
      //substring()字符串截取
      let str = "Hello world";
      let use1 = str.substring(0, 3);
      console.log(use1); // Hel
      let use3 = str.substring(2);
      console.log(use3); // llo world
      //join('')数组转字符串
      console.log(this.arr.join("")); //变成字符串
      let sss = this.arr.join(","); //变成字符串后，以逗号分隔
      //split(',')字符串转数组
      console.log(sss.split("")); //字符串分隔成数组
      sss.split(","); //字符串按逗号分隔成数组
    },

    /**
     * @desc :刷新页面并重载页面数据
     * @params :
     * @author : liangdecheng
     **/
    Refresh() {
      this.reload();
      //正则表达式，去掉字符串中的数字
      let str = "再撒上大赛123";
      console.log(str.replace(/[0-9]/gi, ""));
      //只保留数字
      let strs = "12啊撒13擦擦";
      console.log(strs.replace(/[^\d]/g, ""));
    },

    // 数组for of、map、forEach方法
    arryse() {
      let arrs = [];
      // Object.assign(arrs,this.demo)
      // arrs = this.demo.concat();
      // arrs = JSON.parse(JSON.stringify(this.demo));//深拷贝，但是无法拷贝函数和正则表达式
      // arrs=[...this.demo]
      arrs = this.copy(this.demo);//引用了mixin里面的copy递归拷贝
      //map使用
      arrs.map((item) => {
        item.sex = "男";
      });
      //for of 使用
      for (let item of arrs) {
        item.father='德程'
      }
      //forEach使用
      arrs.forEach(item => {
        item.see='dag'
      });
      console.log(arrs);
      console.log(this.demo);
    },
  },
};
</script>
<style lang="less" scoped>
</style>